<template>
  <PerfectTableComponent
    :loadTableList="loadTableList"
    :changePageSize="changePageSize"
    :changePage="changePage"
    :removeQueryField="removeQueryField"
    :clearQuery="clearQuery"
    v-model:query="query"
    title="客户模块"
    ref="tableRef"
    dialogWidth="800"
    :queryFormHeaders="queryFormHeaders"
    :table="table"
    :tableColumns="tableColumns"
    :showTableIndex="false"
    :operatorColumnWidth="300"
    :baseUrl="urls.API_URL_BACKSTAGE_SHOP_CUSTOMER"
    v-model:form="form"
    :formHeader="formHeader"
    @beforeAddRow="beforeAddRow"
  >
  </PerfectTableComponent>
</template>

<script setup lang="ts">
import PerfectTableComponent from '@/components/base/table/PerfectTableComponent.vue';
import { onMounted, provide, reactive, ref } from 'vue';
import useTableList from '@/api/hooks/useTableList';
import type { FormHeader, ResponseData, TableColumn } from '@/types/interface/base_interface';
import urls from '@/api/request/urls';
import { getDict } from '@/api/dict';
import type { CarBrand } from '@/types/interface/mes_interface';

// 表格工具必备参数
const { table, query, loadTableList, removeQueryField, clearQuery, changePageSize, changePage } = useTableList(urls.API_URL_BACKSTAGE_SHOP_CUSTOMER);
// 将表格刷新函数传到子容器
provide('loadTableList', loadTableList);

//查询==========================================================
const queryFormHeaders = ref<FormHeader[]>([]);

//表格==========================================================
// 表格插件ref对象
const tableRef = ref();

//表格列
// 定义表格所有的列字段信息
const tableColumns = ref<TableColumn[]>([]);

//表单==========================================================
//表单对象
const form = ref<CarBrand>({});
//表单元素类型
const formHeader = ref<FormHeader[]>([]);

onMounted(async () => {
  //定义优先级选项。放在mounted中执行时，要将引用改变量的属性也放进来。
  const sexDict = await getDict('用户性别', 'number');
  queryFormHeaders.value = [
    // 查询表单
    {
      prop: 'username',
      label: '账户名'
    },
    {
      prop: 'name',
      label: '名字'
    },
    {
      prop: 'sex',
      label: '性别',
      type: 'select',
      list: sexDict
    },
    {
      prop: 'tel',
      label: '电话'
    },
    {
      prop: 'createTimeQueryBetween',
      propAsNames: ['createTimeQueryOfBegin', 'createTimeQueryOfEnd'],
      label: '注册时间',
      type: 'daterange',
      show: true,
      width: '300px'
    }
  ];
  //表格对象
  tableColumns.value = [
    {
      label: '账户名',
      prop: 'username',
      width: 150,
      fixed: true
    },
    {
      label: '姓名',
      prop: 'name',
      width: 100,
      fixed: true
    },
    {
      label: '性别',
      prop: 'sex',
      width: 100,
      type: 'dict',
      dict: sexDict
    },
    {
      label: '电话',
      prop: 'tel',
      width: 100
    },
    {
      label: '电子邮箱',
      prop: 'email',
      width: 150
    },
    {
      label: '创建时间',
      prop: 'createTime',
      width: 180
    },
    {
      label: '最后编辑时间',
      prop: 'updateTime',
      width: 180
    }
  ];
  // 添加编辑表单
  formHeader.value = [
    {
      label: '账户名',
      prop: 'username',
      action: 'post',
      rules: [
        {
          required: true,
          message: '不能为空',
          trigger: 'blur'
        },
        {
          min: 2,
          max: 20,
          message: '长度在2到20个字符',
          trigger: 'blur'
        }
      ]
    },
    {
      label: '姓名',
      prop: 'name',
      rules: [
        {
          required: true,
          message: '不能为空',
          trigger: 'blur'
        },
        {
          min: 2,
          max: 20,
          message: '长度在 2 到 20个字符',
          trigger: 'blur'
        }
      ]
    },
    {
      label: '性别',
      prop: 'sex',
      type: 'select',
      list: sexDict,
      rules: [
        {
          required: true,
          message: '不能为空',
          trigger: 'blur'
        }
      ]
    },
    {
      label: '电话',
      prop: 'tel',
      rules: [{ pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码' }]
    },
    {
      label: '地址',
      prop: 'address',
      rules: [
        {
          max: 100,
          message: '长度不超过100个字符',
          trigger: 'blur'
        }
      ]
    },
    {
      label: '邮编',
      prop: 'zip',
      rules: [{ pattern: /^[0-9]{6}$/, message: '请输入正确的邮编格式' }]
    },
    {
      label: '电子邮箱',
      prop: 'email',
      rules: [
        {
          type: 'email',
          message: '格式不正确（正确示例：user@example.com）',
          trigger: ['blur', 'change']
        }
      ]
    },
    {
      label: '个人简介',
      prop: 'intro',
      type: 'editor',
      config: {
        wangeditor: {
          editorPlaceholder: '请输入个人介绍',
          toolbarMode: 'simple',
          editorMode: 'simple',
          toolbarExcludeKeys: [
            'uploadImage', // 假设这是上传图片的key
            'uploadVideo' // 假设这是上传视频的key
          ]
        }
      }
    }
  ];
});
//在添加行的动作以前
const beforeAddRow = async () => {
  //传入初始值
  form.value = {
    enabled: true
  };
};
</script>

<style scoped></style>
